<!--推广升级合伙人-->
<template>
  <view>
    <view style="width: 100%;position:absolute;top: 0;left: 0;">
      <image src="/pagesWater/static/shareBlackBg.jpg" style="width: 100%"></image>
    </view>
    <view class="paddingL15" style="padding-top: 30rpx;padding-bottom: 90rpx;position:relative;">
      <view style="width: 686rpx;height: 300rpx;position:absolute;top: 30rpx;">
        <image src="/pagesWater/static/shareTopBg.png" style="width: 100%;height: 100%"></image>
      </view>
      <view class="topContent paddingL15" style="padding-top: 20rpx">
        <view class="row" style="justify-content: flex-start">
          <view style="width: 44rpx;height: 48rpx">
            <image src="/pagesWater/static/vipIcon.png" style="width: 100%;height: 100%"></image>
          </view>
          <view class="vipStyle">黄金会员</view>
        </view>
        <view style="color: #351E00;font-size: 24rpx;opacity: 0.8;margin-top: 10rpx">黄金会员享受多种权益</view>
        <view style="position:absolute;bottom: 40rpx;width: 90%">
          <view class="row" style="font-size: 24rpx;color: #351E00;">
            <text style="opacity: 0.5;">当前已邀请人数{{usersInfoObj}}人，已获得{{ usersInfoObj * 10 }}次免费查询机会</text>
            <!--<text>{{usersInfoObj.spreadCount}}/{{num}}</text>-->
          </view>
          <!--<view class="lineStep">-->
          <!--  <view :style="{width: usersInfoObj.spreadCount >= num ? '100%' : ((100 / num) * usersInfoObj.spreadCount)+'%' }" class="lineItem"></view>-->
          <!--</view>-->
        </view>

      </view>
    </view>

    <view class="bg_white paddingL15 underContent" style="">
      <view class="titleWater">
        <text>黄金会员专属权益</text>
        <view class="row">
          <view class="rowItem">
            <view style="width: 57rpx;height: 68rpx;margin: 30rpx auto 10rpx">
              <image src="/pagesWater/static/firstIcon.png" style="width: 100%;height: 100%"></image>
            </view>
            <view style="font-size: 30rpx;color: #423115;font-weight: 500">税务查询</view>
            <view style="font-size: 26rpx;color: #423115;line-height: 36rpx;margin-top: 14rpx;opacity: 0.6;">
              <view>快速查询</view>
              <view>税务数据</view>
            </view>
          </view>
          <view class="rowItem">
            <view style="width: 72rpx;height: 54rpx;margin: 40rpx auto 10rpx">
              <image src="/pagesWater/static/secondIcon.png" style="width: 100%;height: 100%"></image>
            </view>
            <view style="font-size: 30rpx;color: #423115;font-weight: 500">免费使用</view>
            <view style="font-size: 26rpx;color: #423115;opacity: 0.6;">免费查询</view>
          </view>
          <view class="rowItem">
            <view style="width: 64rpx;height: 64rpx;margin: 40rpx auto 10rpx">
              <image src="/pagesWater/static/thirdIcon.png" style="width: 100%;height: 100%"></image>
            </view>
            <view style="font-size: 30rpx;color: #423115;font-weight: 500">无限叠加</view>
            <view style="font-size: 26rpx;color: #423115;line-height: 36rpx;margin-top: 14rpx;opacity: 0.6;">
              <view>邀请好友获得</view>
              <view>免费查询机会</view>
            </view>
          </view>
        </view>
      </view>
      <view>
        <view class="row titleWater">
          <text>如何获得查询次数</text>
        </view>
        <view class="isCome">
          <view style="color: #B28C37">1、注册即可获得查询机会</view>
          <view class="activeTitle row">
            <view style="text-indent: 1rem">账号注册成功即可获得10次免费查询机会</view>
            <!--<view class="activeClass">{{usersInfoObj.spreadCount}}/{{ usersInfoObj.spreadCount * 10 }}</view>-->
          </view>
        </view>
        <view class="isCome">
          <view style="color: #B28C37">2、邀请一位好友即可获得10次免费查询机会</view>
          <view class="activeTitle row">
            <view style="text-indent: 1rem">目前邀请{{usersInfoObj}}人注册，获得{{usersInfoObj * 10 }}次查询机会</view>
            <!--<view class="activeClass">{{usersInfoObj.spreadCount}}/{{ usersInfoObj.spreadCount * 10 }}</view>-->
          </view>
        </view>
        <view class="isCome">
          <view style="color: #B28C37">3、每天登录即可获得10次限时查询机会</view>
          <view class="activeTitle row">
            <view style="text-indent: 1rem">登录即可得到10次限时查询次数，每天23:59后失效</view>
            <!--<view class="activeClass">{{usersInfoObj.spreadCount}}/{{ usersInfoObj.spreadCount * 10 }}</view>-->
          </view>
        </view>
      </view>
      <!-- #ifdef H5 -->
      <view @click="goto" class="rightStyle">立即邀请好友</view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <button open-type="share" class="rightStyle">立即邀请好友</button>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import store from "@/store";
import {shareNumApi} from "@/api/share";
import {getUserItem, getUserInfo} from "@/api/user";
import cache from "@/utils/cache";
import share from "@/utils/share";

export default {
  data() {
    return {
      usersInfoObj: '',
      num: 0,
      userInfo:{}
    }
  },
  async onShow() {
    await this.getInfo()
    await this.getUserInfo()
    // #ifdef H5
    await share.getShareConfig({}, this.$WXMENU);
    // #endif
  },
   // #ifdef MP-WEIXIN
   onShareAppMessage: function (res) {
    return {
      title: '助融报告',
      path: `/pages/waterReport/index?spreadUid=${this.userInfo.id}&channelCode=fenxianggongju`,
    }
  },
  // #endif
  methods: {
    async getNum () {
      let res = await shareNumApi()
      if (res.code == 200) {
        this.num = res.data.configValue
      }
    },
    getUserInfo() {
      getUserInfo().then(res => {
        if (res.code == 200) {
          this.userInfo = res.data
        }
      })
    },
    async getInfo() {
      getUserItem().then(async res => {
        if (res.code == 200) {
          this.usersInfoObj = res.data
        }
      }).catch(err => {
        if (err.code == 401) {
          uni.navigateTo({
            url:'/pagesWater/users/login'
          })
        }
      })
    },
    goto() {
      uni.navigateTo({ url: '/pagesWater/extension/rightNow' })
    }
  }
}
</script>

<style lang="scss" scoped>
.topContent {
  width: 686rpx;
  height: 300rpx;
  border-radius: 20rpx;
  //background: #F0BE6E;
  position: relative;
}
.vipStyle {
  color: #351E00;
  font-size: 36rpx;
  font-weight: 600;
  margin-left: 20rpx;
}
.lineStep {
  width: 100%;
  height: 15rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  position: relative;
  top: 12rpx;
}
.lineItem {
  height: 15rpx;
  background: #D98322;
  border-radius: 20rpx;
  position: absolute;
  top: 0;
  left: 0;
}
.underContent {
  height: calc(100vh - 160rpx);
  margin-top: -56rpx;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  border-radius: 25rpx 25rpx 0 0;
  position: relative;
  z-index: 9;
}
.rightStyle {
  width: 90%;
  height: 88rpx;
  line-height: 88rpx;
  font-weight: 500;
  border-radius: 60rpx;
  color: #3B1B05;
  margin: 40rpx auto;
  background: linear-gradient( 90deg, #F4DBB3 0%, #E3B868 100%);
  text-align: center;
}
.activeTitle {
  >view {
    &:nth-child(1){
      color: #999999;
      font-size: 24rpx;
      margin-top: 20rpx;
    }
    &:nth-child(2) {
      background: linear-gradient( 90deg, #EECB87 0%, #E8AA47 100%);
      font-size: 24rpx;
      color: #FFFFFF;
      margin-top: 12rpx;
    }
  }
}
.isCome {
  width: 100%;
  border-radius: 20rpx;
  background: #FDF7EE;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
}
.titleWater {
  justify-content: flex-start;
  line-height: 50rpx;
  margin-bottom: 20rpx;
  .rowItem {
    width: 212rpx;
    height: 280rpx;
    text-align: center;
    border-radius: 20rpx;
    margin-top: 30rpx;
    background: linear-gradient( 180deg, #FDF7EF 0%, #FCEEDA 100%);
  }
  >text {
    //&:nth-child(1) {
    //  width: 10rpx;
    //  height: 40rpx;
    //  background: #488AFD;
    //  border-radius: 10rpx;
    //  display: inline-block;
    //}
    &:nth-child(1) {
      font-size: 32rpx;
      font-weight: 500;
      margin-left: 10rpx;
    }
  }
}
.activeClass {
  width: 120rpx;
  height: 48rpx;
  border-radius: 35rpx;
  line-height: 48rpx;
  text-align: center;
  color: #FFFFFF;
  background: #488AFD;
}
</style>